ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ಗ್ರಾಫ್ ಆಪ್ಟಿಮೈಸೇಶನ್: ಡಿಪೆಂಡೆನ್ಸಿ ಗ್ರಾಫ್ ಸರಳೀಕರಣ

ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ, ವೆಬ್‌ಪ್ಯಾಕ್, ರೋಲಪ್ ಮತ್ತು ಪಾರ್ಸೆಲ್ ನಂತಹ ಮಾಡ್ಯೂಲ್ ಬಂಡ್ಲರ್‌ಗಳು ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ನಿಯೋಜನೆಗಾಗಿ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿದ ಬಂಡಲ್‌ಗಳನ್ನು ರಚಿಸಲು ಅಗತ್ಯವಾದ ಸಾಧನಗಳಾಗಿವೆ. ಈ ಬಂಡ್ಲರ್‌ಗಳು ಮಾಡ್ಯೂಲ್ ಗ್ರಾಫ್ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿವೆ, ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿನ ಮಾಡ್ಯೂಲ್‌ಗಳ ನಡುವಿನ ಡಿಪೆಂಡೆನ್ಸಿಗಳ ನಿರೂಪಣೆಯಾಗಿದೆ. ಈ ಗ್ರಾಫ್‌ನ ಸಂಕೀರ್ಣತೆಯು ಬಿಲ್ಡ್ ಸಮಯಗಳು, ಬಂಡಲ್ ಗಾತ್ರಗಳು ಮತ್ತು ಒಟ್ಟಾರೆ ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಗಮನಾರ್ಹವಾಗಿ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಆದುದರಿಂದ, ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಸರಳೀಕರಿಸುವ ಮೂಲಕ ಮಾಡ್ಯೂಲ್ ಗ್ರಾಫ್ ಅನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡುವುದು ಫ್ರಂಟ್-ಎಂಡ್ ಅಭಿವೃದ್ಧಿಯ ಒಂದು ನಿರ್ಣಾಯಕ ಅಂಶವಾಗಿದೆ.

ಮಾಡ್ಯೂಲ್ ಗ್ರಾಫ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಮಾಡ್ಯೂಲ್ ಗ್ರಾಫ್ ಒಂದು ನಿರ್ದೇಶಿತ ಗ್ರಾಫ್ ಆಗಿದ್ದು, ಇದರಲ್ಲಿ ಪ್ರತಿ ನೋಡ್ ಒಂದು ಮಾಡ್ಯೂಲ್ (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್, ಸಿಎಸ್‌ಎಸ್ ಫೈಲ್, ಚಿತ್ರ, ಇತ್ಯಾದಿ) ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರತಿ ಎಡ್ಜ್ ಮಾಡ್ಯೂಲ್‌ಗಳ ನಡುವಿನ ಡಿಪೆಂಡೆನ್ಸಿಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಬಂಡ್ಲರ್ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಿದಾಗ, ಅದು ಎಂಟ್ರಿ ಪಾಯಿಂಟ್‌ನಿಂದ (ಸಾಮಾನ್ಯವಾಗಿ `index.js` ಅಥವಾ `main.js`) ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಮತ್ತು ಮಾಡ್ಯೂಲ್ ಗ್ರಾಫ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಾ, ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಪುನರಾವರ್ತಿತವಾಗಿ ಪರಿಶೀಲಿಸುತ್ತದೆ. ಈ ಗ್ರಾಫ್ ಅನ್ನು ನಂತರ ವಿವಿಧ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ, ಅವುಗಳೆಂದರೆ:

• ಟ್ರೀ ಶೇಕಿಂಗ್: ಡೆಡ್ ಕೋಡ್ (ಬಳಕೆಯಾಗದ ಕೋಡ್) ಅನ್ನು ತೆಗೆದುಹಾಕುವುದು.
• ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್: ಕೋಡ್ ಅನ್ನು ಸಣ್ಣ ಚಂಕ್‌ಗಳಾಗಿ ವಿಭಜಿಸುವುದು, ಇವುಗಳನ್ನು ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಲೋಡ್ ಮಾಡಬಹುದು.
• ಮಾಡ್ಯೂಲ್ ಕನ್‌ಕ್ಯಾಟಿನೇಷನ್: ಓವರ್‌ಹೆಡ್ ಕಡಿಮೆ ಮಾಡಲು ಹಲವು ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಒಂದೇ ಸ್ಕೋಪ್‌ಗೆ ಸಂಯೋಜಿಸುವುದು.
• ಮಿನಿಫಿಕೇಶನ್: ವೈಟ್‌ಸ್ಪೇಸ್ ತೆಗೆದುಹಾಕಿ ಮತ್ತು ವೇರಿಯಬಲ್ ಹೆಸರುಗಳನ್ನು ಚಿಕ್ಕದಾಗಿಸಿ ಕೋಡ್‌ನ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು.

ಒಂದು ಸಂಕೀರ್ಣವಾದ ಮಾಡ್ಯೂಲ್ ಗ್ರಾಫ್ ಈ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳಿಗೆ ಅಡ್ಡಿಯಾಗಬಹುದು, ಇದು ದೊಡ್ಡ ಬಂಡಲ್ ಗಾತ್ರಗಳಿಗೆ ಮತ್ತು ನಿಧಾನವಾದ ಲೋಡಿಂಗ್ ಸಮಯಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ. ಆದ್ದರಿಂದ, ಅತ್ಯುತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸಾಧಿಸಲು ಮಾಡ್ಯೂಲ್ ಗ್ರಾಫ್ ಅನ್ನು ಸರಳೀಕರಿಸುವುದು ಅತ್ಯಗತ್ಯ.

ಡಿಪೆಂಡೆನ್ಸಿ ಗ್ರಾಫ್ ಸರಳೀಕರಣಕ್ಕಾಗಿ ತಂತ್ರಗಳು

ಡಿಪೆಂಡೆನ್ಸಿ ಗ್ರಾಫ್ ಅನ್ನು ಸರಳೀಕರಿಸಲು ಮತ್ತು ಬಿಲ್ಡ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ಹಲವಾರು ತಂತ್ರಗಳನ್ನು ಬಳಸಬಹುದು. ಅವುಗಳೆಂದರೆ:

1. ಸರ್ಕ್ಯುಲರ್ ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಗುರುತಿಸುವುದು ಮತ್ತು ತೆಗೆದುಹಾಕುವುದು

ಸರ್ಕ್ಯುಲರ್ ಡಿಪೆಂಡೆನ್ಸಿಗಳು ಎಂದರೆ ಎರಡು ಅಥವಾ ಹೆಚ್ಚು ಮಾಡ್ಯೂಲ್‌ಗಳು ನೇರವಾಗಿ ಅಥವಾ ಪರೋಕ್ಷವಾಗಿ ಪರಸ್ಪರ ಅವಲಂಬಿತವಾದಾಗ ಸಂಭವಿಸುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ಮಾಡ್ಯೂಲ್ A ಮಾಡ್ಯೂಲ್ B ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರಬಹುದು, ಅದು ಮತ್ತೆ ಮಾಡ್ಯೂಲ್ A ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ. ಸರ್ಕ್ಯುಲರ್ ಡಿಪೆಂಡೆನ್ಸಿಗಳು ಮಾಡ್ಯೂಲ್ ಇನಿಶಿಯಲೈಸೇಶನ್, ಕೋಡ್ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಮತ್ತು ಟ್ರೀ ಶೇಕಿಂಗ್‌ನಲ್ಲಿ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು. ಬಂಡ್ಲರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಸರ್ಕ್ಯುಲರ್ ಡಿಪೆಂಡೆನ್ಸಿಗಳು ಪತ್ತೆಯಾದಾಗ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಅಥವಾ ದೋಷಗಳನ್ನು ನೀಡುತ್ತವೆ.

ಉದಾಹರಣೆ:

moduleA.js:

            import { moduleBFunction } from './moduleB';

export function moduleAFunction() {
 return moduleBFunction();
}

            

              
                Copy
              
            
          

moduleB.js:

            import { moduleAFunction } from './moduleA';

export function moduleBFunction() {
 return moduleAFunction();
}

            

              
                Copy
              
            
          

ಪರಿಹಾರ:

ಸರ್ಕ್ಯುಲರ್ ಡಿಪೆಂಡೆನ್ಸಿಯನ್ನು ತೆಗೆದುಹಾಕಲು ಕೋಡ್ ಅನ್ನು ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡಿ. ಇದರಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿ ಹಂಚಿಕೆಯ ಕಾರ್ಯವನ್ನು ಒಳಗೊಂಡಿರುವ ಹೊಸ ಮಾಡ್ಯೂಲ್ ಅನ್ನು ರಚಿಸುವುದು ಅಥವಾ ಡಿಪೆಂಡೆನ್ಸಿ ಇಂಜೆಕ್ಷನ್ ಅನ್ನು ಬಳಸುವುದು ಸೇರಿದೆ.

ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡಲಾಗಿದೆ:

utils.js:

            export function sharedFunction() {
 // Shared logic here
 return "Shared value";
}

            

              
                Copy
              
            
          

moduleA.js:

            import { sharedFunction } from './utils';

export function moduleAFunction() {
 return sharedFunction();
}

            

              
                Copy
              
            
          

moduleB.js:

            import { sharedFunction } from './utils';

export function moduleBFunction() {
 return sharedFunction();
}

            

              
                Copy
              
            
          

ಕ್ರಿಯಾತ್ಮಕ ಒಳನೋಟ: `madge` ಅಥವಾ ಬಂಡ್ಲರ್-ನಿರ್ದಿಷ್ಟ ಪ್ಲಗಿನ್‌ಗಳಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ ನಿಮ್ಮ ಕೋಡ್‌ಬೇಸ್ ಅನ್ನು ನಿಯಮಿತವಾಗಿ ಸರ್ಕ್ಯುಲರ್ ಡಿಪೆಂಡೆನ್ಸಿಗಳಿಗಾಗಿ ಸ್ಕ್ಯಾನ್ ಮಾಡಿ ಮತ್ತು ಅವುಗಳನ್ನು ತಕ್ಷಣವೇ ಪರಿಹರಿಸಿ.

2. ಇಂಪೋರ್ಟ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡುವುದು

ನೀವು ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡುವ ವಿಧಾನವು ಮಾಡ್ಯೂಲ್ ಗ್ರಾಫ್ ಮೇಲೆ ಗಮನಾರ್ಹವಾಗಿ ಪರಿಣಾಮ ಬೀರಬಹುದು. ನೇಮ್ಡ್ ಇಂಪೋರ್ಟ್‌ಗಳನ್ನು ಬಳಸುವುದು ಮತ್ತು ವೈಲ್ಡ್‌ಕಾರ್ಡ್ ಇಂಪೋರ್ಟ್‌ಗಳನ್ನು ತಪ್ಪಿಸುವುದು ಬಂಡ್ಲರ್‌ಗೆ ಟ್ರೀ ಶೇಕಿಂಗ್ ಅನ್ನು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಉದಾಹರಣೆ (ಅಸಮರ್ಥ):

            import * as utils from './utils';

utils.functionA();
utils.functionB();

            

              
                Copy
              
            
          

ಈ ಸಂದರ್ಭದಲ್ಲಿ, `utils.js` ನಿಂದ ಯಾವ ಫಂಕ್ಷನ್‌ಗಳು ನಿಜವಾಗಿಯೂ ಬಳಸಲ್ಪಟ್ಟಿವೆ ಎಂಬುದನ್ನು ಬಂಡ್ಲರ್‌ಗೆ ನಿರ್ಧರಿಸಲು ಸಾಧ್ಯವಾಗದಿರಬಹುದು, ಇದು ಬಳಸದ ಕೋಡ್ ಅನ್ನು ಬಂಡಲ್‌ನಲ್ಲಿ ಸೇರಿಸಲು ಕಾರಣವಾಗಬಹುದು.

ಉದಾಹರಣೆ (ಸಮರ್ಥ):

            import { functionA, functionB } from './utils';

functionA();
functionB();

            

              
                Copy
              
            
          

ನೇಮ್ಡ್ ಇಂಪೋರ್ಟ್‌ಗಳೊಂದಿಗೆ, ಬಂಡ್ಲರ್ ಯಾವ ಫಂಕ್ಷನ್‌ಗಳು ಬಳಸಲ್ಪಟ್ಟಿವೆ ಎಂಬುದನ್ನು ಸುಲಭವಾಗಿ ಗುರುತಿಸಬಹುದು ಮತ್ತು ಉಳಿದವನ್ನು ತೆಗೆದುಹಾಕಬಹುದು.

ಕ್ರಿಯಾತ್ಮಕ ಒಳನೋಟ: ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ವೈಲ್ಡ್‌ಕಾರ್ಡ್ ಇಂಪೋರ್ಟ್‌ಗಳ ಬದಲು ನೇಮ್ಡ್ ಇಂಪೋರ್ಟ್‌ಗಳನ್ನು ಬಳಸಿ. ಈ ಅಭ್ಯಾಸವನ್ನು ಜಾರಿಗೊಳಿಸಲು ESLint ನಂತಹ ಸಾಧನಗಳನ್ನು ಇಂಪೋರ್ಟ್-ಸಂಬಂಧಿತ ನಿಯಮಗಳೊಂದಿಗೆ ಬಳಸಿ.

3. ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್

ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಎನ್ನುವುದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸಣ್ಣ ಚಂಕ್‌ಗಳಾಗಿ ವಿಭಜಿಸುವ ಪ್ರಕ್ರಿಯೆಯಾಗಿದ್ದು, ಇವುಗಳನ್ನು ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಲೋಡ್ ಮಾಡಬಹುದು. ಇದು ಆರಂಭಿಕ ವೀಕ್ಷಣೆಗಾಗಿ ಅಗತ್ಯವಿರುವ ಕೋಡ್ ಅನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡುವ ಮೂಲಕ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಸಾಮಾನ್ಯ ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ತಂತ್ರಗಳು ಹೀಗಿವೆ:

• ರೂಟ್-ಆಧಾರಿತ ಸ್ಪ್ಲಿಟಿಂಗ್: ಅಪ್ಲಿಕೇಶನ್‌ನ ರೂಟ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ಕೋಡ್ ಅನ್ನು ವಿಭಜಿಸುವುದು.
• ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ಸ್ಪ್ಲಿಟಿಂಗ್: ಪ್ರತ್ಯೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ಕೋಡ್ ಅನ್ನು ವಿಭಜಿಸುವುದು.
• ವೆಂಡರ್ ಸ್ಪ್ಲಿಟಿಂಗ್: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಕೋಡ್‌ನಿಂದ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಲೈಬ್ರರಿಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸುವುದು.

ಉದಾಹರಣೆ (ರಿಯಾಕ್ಟ್‌ನೊಂದಿಗೆ ರೂಟ್-ಆಧಾರಿತ ಸ್ಪ್ಲಿಟಿಂಗ್):

            import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
 return (
 
 Loading...